<template>
    <div class="two-warp">
        <div class="search-input" v-if="nowSchoolId">
            <img class="add" src="../assets/images/add.png" alt="">
            <selector title="" ref="defaultValueRef" :options="schoolList" v-model="nowSchoolId"  @on-change="filterSchool(nowSchoolId)"></selector>
            <div class="input-div">
                <img src="../assets/images/search.png" alt="">
                <input type="text" v-model="searchName" @keyup.enter="search(searchName)" class="input" placeholder="搜索商品">
            </div>
        </div>

        <div class="grid-wrap" v-if="kindList.length>0">
            <grid :cols="5" :show-lr-borders="false">
                <div v-for="(item,index) in kindList" @click.stop="handleTenTap(item,index)">
                    <grid-item  :label="item.name" > 
                        <img slot="icon" :src="item.img" alt="" srcset=""> 
                    </grid-item>
                </div>
                <!-- <grid-item label="交通工具"> <img slot="icon" src="../assets/images/bike.jpg" alt="" srcset=""> </grid-item> -->
            </grid>
         </div>
        <div class="recommend-wrap">
            <div class="recommendation">
                <div class="recommendation-left">
                    <span>为你推荐</span>
                </div>
                <div class="recommendation-right" @click="changeFour">
                    <span>换一批</span>
                </div>
            </div>
            <grid :cols="4" class="recommendation-girds" :show-lr-borders="false">
                <div v-for="(item,index) in fourList" @click.stop="handleFourTap(item,index)">
                    <grid-item  :label="item.name" > 
                        <img slot="icon" :src="item.img" alt="" srcset=""> 
                    </grid-item>
                </div>
                <!-- <grid-item label="二手电脑"> <img slot="icon" src="../assets/images/mac.jpg" alt="" srcset=""></grid-item>-->
            </grid>
        </div>

        <tab :custom-bar-width="getBarWidth" :scroll-threshold="5" :line-width="4" bar-active-color="#feba4e">
            <tab-item v-for="(item,index) in tabItem"
            @on-item-click="tabSwitch(index)" :selected="index === idx" :key="item">{{item}}</tab-item>
        </tab>
        <scroller lock-x height="500px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
            <div class="box2">
                <card v-for="(item,index) in goodsList" :key='index'>
                    <div slot="header" class="message-list" @click="goDetial(item[1])">
                        <img :src="item[0]" alt="" class="left">
                        <div class="right">
                            <div class="name-box">
                                <span class="nickname">{{item[1].shopName}}</span>
                                <span class="price">￥{{item[1].discountPrice}}</span>
                            </div>
                            <div class="time-box">
                                发布于{{item[1].createDateName}}
                            </div>
                        </div>
                    </div>
                    <div slot="content" class="message-content" @click="goDetial(item[1])">
                        <!-- <scroller lock-y :scrollbar-x=false>
                            <div class="box1">
                                <div class="box1-item" v-for="i in 7"><img src="../assets/images/detail.png" alt="" srcset=""></div>
                            </div>
                        </scroller> -->
                        <div style="padding:0 15px;height: 300px;">
                            <img :src="item[1].logo" width="100%" height="100%">
                        </div>
                        <div class="title">
                        {{item[1].name}}</div>
                        <div class="qa" v-if="item[3]>0">
                            <i>{{item[4][0].content}}</i>
                            <i v-if="item[4].length>1">{{item[4][1].content}}</i>
                            <!-- <i>主人回复：可以的，私聊地址时间。</i> -->
                        </div>
                    </div>
                    <div slot="footer" class="message-footer">
                        <div class="addr">
                            <!-- 来自武汉·洪山区光谷世界城广场 -->
                            来自 {{shoolname}}
                        </div>
                        <div class="action" style="float:right;"><span>点赞 {{item[2]}}</span>　<span>留言 {{item[3]}}</span></div>
                    </div>
                </card>
                <load-more :tip="loadingText" :show-loading="onFetching"></load-more>
            </div>
        </scroller>
        <foot-nav/>
        <div class="addGoods" @click="goPublish">
            <div class="add">+</div>
            <div class="text">发布</div>
        </div>
    </div>
</template>

<script>
    import axios from '@/api/request'
    import footNav from "@/components/footer-nav.vue"
    import { mapState,mapGetters } from "vuex";
    import {Grid,GridItem,Tab,TabItem,Card,Scroller,Selector,LoadMore} from 'vux'

    export default {
        data() {
            return {
                loadingText: '',
                idx: '',
                searchName: '',
                goodsList: [],
                nowSchoolId: '',
                schoolList: [],  
                shoolname:'',
                tabItem: ['同校的', '新鲜的'],
                slideBool:false,
                collegeList:['清华大佛挡学','人民大学','武汉大学'],
                college:'人民大学',
                kindList: [],
                fourList: [],
                fourQuery: {
                    pageNumber: 1,
                    pageSize: 4, 
                },
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        schoolId:'',
                    }
                },
                onFetching: false,
                bottomCount: 20,
            }
        },
        components: {
            Grid,
            Selector,LoadMore,
            GridItem,
            Tab,
            Scroller,
            TabItem,
            Card,
            footNav,
            Scroller,
        },
        computed:{
            // ...mapState({
            //   userId:state=>state.userId,
            // }),
            ...mapGetters({
              openId: 'doneOpenId',
              userId: 'doneUserId',
              phone: 'donePhone',
              schoolId: 'doneSchoolId',
            }),
        },
        created() {
            this.nowSchoolId = this.schoolId
            this.listQuery.param.schoolId = this.nowSchoolId
            console.log(this.userId)
            this.fetchSchoolList()
            this.fetchFourCommend()   //为你推荐
        },
        mounted() {
            this.fetchFirstKind()   //生成十个分类
            // this.fetchSecGoodsList() //获取二手商品
        },
        methods: {
            fetchSchoolList() {
                axios('/device/school/list','post',{}).then(res=>{
                    if(res.data.code==1000){
                        // console.log(res)
                        let arr = res.data.data.list
                        for(let i in arr){
                           this.schoolList.push({key: arr[i]['id'],value: arr[i]['name']})
                        }
                        this.shoolname=this.$refs['defaultValueRef'].getFullValue()[0].value
                    }
                })
            },
            fetchFirstKind(){   //生成十个一级分类
                axios('/device/kindSecond/firstCatalog','post',{}).then(res=>{
                    if(res.data.code==1000){
                        let data = res.data.data
                        let arr = data.slice(0,9)
                        let end = {
                            img: require('../assets/images/more.png'),
                            name: '全部分类',
                            description: '这是全部分类'
                        }
                        arr.push(end)
                        this.kindList = arr
                    }
                })
            },
            handleTenTap(item,index) {
                switch (index) {
                    case 9: 
                        this.$router.push({path:'secondClassify'})
                        break;
                    default :
                        this.$router.push({path:'category',query:{firstKindId: item.id}})
                }
            },
            fetchFourCommend() {        //为你推荐
                axios('/device/kindSecond/listRecommend','post',this.fourQuery).then(res=>{
                    if(res.data.code==1000){
                        // console.log(res)
                        this.fourList = res.data.data.list
                    }
                })
            },
            handleFourTap(item,idx) {
                this.$router.push({path:'category',query:{firstKindId: item.id}})
            },
            changeFour(){
                if(this.fourQuery.pageNumber==1){
                    this.fourQuery.pageNumber=2
                }else{
                    this.fourQuery.pageNumber=1
                }
                this.fetchFourCommend()
            },
            fetchHotList() {        //热卖精选
                axios('/device/product/hotList','post',{}).then(res=>{
                    if(res.data.code==1000){
                        this.hotSaleList = res.data.data
                        this.initScroll()
                    }
                })
            },
            filterSchool(val){
                this.goodsList = []
                this.listQuery.param.schoolId = val
                this.listQuery.param.pageNumber = 1
                this.idx = 0
                this.fetchSecGoodsList()
            },
            search(name){            //搜索商品,跳转到二手商品列表
                this.$router.push({path:'category',query:{name: name}})
            },
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index];
                // debugger
                return text.length * 16 + "px";
            },
            tabSwitch(idx){
                this.goodsList = []
                console.log(idx)
                this.idx = idx
                if(idx==0){
                    this.listQuery.param.schoolId = this.nowSchoolId
                }else{
                    this.listQuery.param.schoolId = ""
                }
                this.fetchSecGoodsList()
                this.onFetching = true
                this.loadingText = "loading"
            },
            fetchSecGoodsList() {  //新鲜的、同校的
                axios('/device/productSecond/secondFresh','post',this.listQuery).then(res=>{
                    if(res.data.code==1000){
                        console.log(333)
                        console.log(res)
                        if(res.data.data.length==0){
                            this.listQuery.pageNumber-=1
                            this.$vux.toast.text('没有更多数据了', 'middle')
                            this.loadingText = "没有数据啦·～～·"
                        }else{
                            this.goodsList = this.goodsList.concat(res.data.data)
                            this.$nextTick(() => {
                                this.$refs.scrollerBottom.reset()
                            })
                        }
                        this.onFetching = false
                    }
                })
            },
            goDetial(item) {
                this.$router.push({path: 'secGoodsDetail',query:{goodsId: item.id}})
            },
            onScrollBottom(){
                let self = this
                if(this.onFetching) {
                    // do nothing
                }else {
                    this.onFetching = true
                    this.loadingText = "loading"
                    // setTimeout(() => {
                        // this.bottomCount += 10
                        this.listQuery.pageNumber+=1
                        self.fetchSecGoodsList()
                        // this.$nextTick(() => {
                        //     this.$refs.scrollerBottom.reset()
                        // })
                        // this.onFetching = false
                    // }, 2000)
                }
            },
            goPublish() {
                let data = {
                    openId: this.openId
                }
                axios('/device/userEntity/getUserByOpenId','post',data).then(res=>{
                    if(res.data.code==1000){
                        var userData = res.data.data.userCenter
                        if(userData.ssm==2){
                            this.$router.push({path: '/publishGoods',query:{userId: userData.id}})
                        }else if(userData.ssm==1){
                            this.$vux.toast.text('店铺审核中,请耐心等待吧', 'middle')
                        }else{
                            this.$vux.toast.text('您还没有入住店铺，请先申请入住', 'middle')
                        }
                    }
                })
                
            }
        }
    }
</script>

<style>
    .two-warp .weui-grid{
        padding-top: 0 !important;
    }
    .two-warp .weui-grid__label {
        font-size: 12px;
        margin-top: 8px!important;
    }

    .recommendation-girds .weui-grid__icon {
        width: 52px;
        height: 45px;
    }

    .two-warp .weui-grid__icon {
        width: 43px;
        height: 43px;
    }

    .two-warp .weui-grid {
        padding-top: 16px;
        padding-bottom: 0px;
        border: none;
        margin: 0.10666667rem 0;
    }
    .two-warp .weui-grid:before{
        border: none;
    }
    .two-warp .weui-grid:after{
        border: none;

    }



    .two-warp .weui-grids {
        padding: 0.53333333rem 0;
    }

    .recommendation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 40px;
    }

    .recommendation-girds {
        padding-top: 0px!important;
        font-size: 13px;
        margin-bottom: 45px;
    }

    .recommendation-left {
        margin-left: 31px;
        position: relative;
        font-size: 15px;
        color: #333333;
    }

    .recommendation-right {
        margin-right: 43px;
        position: relative;
        font-size: 12px;
        color: #999999;
    }

    .recommendation-left::before {
        position: absolute;
        content: ' ';
        width: 15px;
        height: 15px;
        background-image: url('../assets/images/rings.png');
        background-position: center;
        background-size: 12px 9px;
        background-repeat: no-repeat;
        left: -20px;
        top: 4px;
    }

    .recommendation-right::after {
        position: absolute;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../assets/images/reload.jpg');
        background-position: center;
        background-size: 12px 9px;
        background-repeat: no-repeat;
        right: -20px;
        top: -1px;
    }

    .two-warp .vux-tab .vux-tab-item.vux-tab-selected {
        color: #222222;
    }

    .two-warp .vux-tab-container{
        position: relative !important;
    }
    .weui-panel:before{
        border: none;
    }
    .weui-panel:after{
        border: none !important;
    }
    .weui-panel__bd{
        background:#fff;
    }
    .message-footer{
        background: #fff;
    }
    .weui-panel__bd{}
</style>

<style lang="less" scoped>

    .search-input {
        background-color: #fff;
        height: 92/75rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e5e5e5;
        .add {height: 30/75rem;margin-left: 31/75rem; margin-right: 15/75rem;}
        .down {font-size: 150%;;margin-left: 15/75rem; margin-top: 4px;}
        .input-div {
            position: relative;
            flex:1;
            width: 0;
            margin-right: 20/75rem;        
            img { 
                height: 34/75rem; 
                position: absolute;
                left: 25px;
                top: 7px;
             }
            .input {
                margin-left: 30/75rem;
                width: 93%;
                border: none;
                background-color: #F5F5F5;
                outline: none;
                height: 60/75rem;
                margin-right: 20/75rem;
                border-radius: 60/75rem;
                padding-left:35px;
                font-size: 25/75rem;
            }
        }
        
    }
    

    .two-warp .vux-tab .vux-tab-item.vux-tab-selected{

        color: #222;
    }
    .two-warp .vux-tab-wrap{
        padding-top: 0;
    }
    .two-warp .weui-panel{
        padding-bottom: 25rem/75;
        background:#f3f5f9;
    }
    .vux-tab .vux-tab-item{
        font-size:30rem/75;
    }
    .grid-wrap{
        padding-bottom: 25rem/75;
        background:#f3f5f9;
        .weui-grids{
            background:#fff;
        }
    }
    .weui-grids:before{
        border: none;
    }
    .recommendation{
        padding-top: 35rem/75;
        padding-bottom: 30rem/75;
    }
    .recommend-wrap{
        padding-bottom: 25rem/75;
        background:#f3f5f9;
        .recommendation{
            background:#fff;
        }
        .weui-grids{
            background:#fff;
            margin-bottom: 0;
        }
    }
    .vux-tab-warp{
        padding-top: 43rem/75;
        margin-bottom: 50rem/75;
        
    }
    .two-top{
        width:705rem/75;
        margin: 0 auto;
        height:90rem/75;
        align-items:center;
        justify-content: space-between;
        .top-left{
            background:url(../assets/images/two3.png) no-repeat right 15rem/75;
            background-size: 22rem/75;
            padding-right: 30rem/75;
            position: relative;
            span{
                padding-left: 44rem/75;
                background: url(../assets/images/two1.png) no-repeat left center;
                background-size: 25rem/75;
                font-size:26rem/75;
                color: #444444;
            }
            ul{
                position:absolute;
                left:0;
                z-index: 1000;
                width:100%;
                padding: 15rem/75 0;
                background:#fff;
                box-shadow: 5rem/75 5rem/75 5rem/75 2rem/75 rgba(0,0,0,.2);
                border-top: 1px solid #ccc;
                li{
                    padding-left: 20rem/75;
                    line-height:60rem/75;
                }
            }
        }
        .top-right{
            width:505rem/75;
            height:60rem/75;
            background:#f5f5f5;
            border-radius: 40rem/75;
            padding-left: 85rem/75;
            background:url(../assets/images/two2.png) no-repeat 31rem/75 center #f5f5f5;
            background-size: 36rem/75;
            overflow: hidden;
            input{
                flex:1;
                background:#f5f5f5;
                border: none;
            }
        }
    }
    .box1 {
        height: 120px;
        position: relative;
        width: 1000px;
    }

    .box1-item {
        width: 120px;
        height: 120px;
        background-color: #ccc;
        display: inline-block;
        margin-left: 11px;
        float: left;
        text-align: center;
        line-height: 100px;
        img {
            width: 100%;
            height: 100%;
        }
        &:first-child {
            margin-left: 20px!important;
        }
    }

    .message-content {
        padding-top: 20px;
        padding-bottom: 15px;
        position: relative;
        &:after {
            position: absolute;
            bottom: 0;
            left: 20px;
            content: ' ';
            height: 1px;
            width: 100vw;
            border-bottom: 1px solid #dbdbdb;
        }
        .qa {
            margin-left: 20px;
            padding-left: 10px;
            i {
                font-style: normal;
                display: block;
                margin-bottom: 5px;
                font-size: 12px;
            }
            border-left: 2px solid #ffda44;
        }
    }

    .message-content .title {
        font-size: 14px;
        color: #333333;
        line-height: 2;
        margin: 8px 19px 12px 19px;
    }

    .box1-item:first-child {
        margin-left: 0;
    }

    .message-list {
        padding: 0 20px 0 10px;
        position: relative;
        height: 47px;
        background:#fff;
        margin: 0;
        .left {
            position: absolute;
            width: 92rem/75;
            height: 92rem/75;
            border-radius: 50%;        
        }
        .right {
            margin-left: 72px;
            .name-box {
                line-height: 18px;
                font-size: 18px;
                height: 26px;
                padding-top: 8px;
                .nickname {
                    font-size: 15px;
                    color: #333333;
                    font-size: 18px;
                }
                .price {
                    float: right;
                    font-size: 18px;
                    color: #ff4444;
                }
                .time-box {
                    line-height: 1;
                    margin-top: 8px;
                }
            }
        }
    }

    .message-footer {
        line-height: 1;
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        // padding: 10rem/75 20px 0;
        padding: 0 20px 0;
        height:75rem/75;
        align-items:center;
        .addr {
            font-size: 12px;
            color: #3db1ed;
            flex:1;
            text-align:left;
        }
        .action {
            float: right;
            text-align: left;
            span {
                margin-left: 14px;
            }
        }
    }

    .two-warp .weui-panel {
        margin-bottom: 0;
    }
</style>
